import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:xinxuan/controllers/home_controller/search_page_controller.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:get/get.dart';
import 'package:xinxuan/utils/color_util.dart';

class SearchPage extends StatelessWidget {

  final TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgWhiteColor,
      appBar: AppBarUtil(
        title: '搜索',
        backgroundColor: pageBgColor,
      ),
      body: GetBuilder<SearchPageController>(
        init: SearchPageController(),
        builder: (controller) {
          return ScrollConfigurationCommon(child: ListView(
            children: [
              _searchBar(controller),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 20.w),
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(vertical: 12.h),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '历史搜索',
                            style: TextStyle(
                              color: textBlackColor,
                              fontSize: 16.sp
                            ),
                          ),
                          InkWellUtil.shakeProofInkWell(Image.asset(
                            'assets/icons/icon_del.png',
                            width: 17.w,
                            height: 15.h,
                          ), () {
                            controller.cleanSearchRecord();
                          })
                        ],
                      ),
                    ),
                    Container(
                      width: 335.w,
                      child: Obx(() => Wrap(
                        spacing: 10.w,
                        runSpacing: 10.w,
                        alignment: WrapAlignment.start,
                        children: controller.searchRecord.map((item) {
                          return InkWellUtil.shakeProofInkWell(Container(
                            padding: EdgeInsets.symmetric(horizontal: 22.w, vertical: 6.h),
                            decoration: BoxDecoration(
                              color: pageBgColor,
                              borderRadius: BorderRadius.circular(16.w)
                            ),
                            child: Text(
                              item,
                              style: TextStyle(
                                color: tipsColor,
                                fontSize: 14.sp
                              ),
                            ),
                          ), () {
                            controller.search(item);
                          });
                        }).toList(),
                      )),
                    )
                  ],
                ),
              )
            ],
          ));
        },
      ),
    );
  }

  /// 搜索栏
  Widget _searchBar(SearchPageController controller) {
    return Container(
      height: 68.h,
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: lineColor,
            width: .5
          )
        )
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(child: Container(
            height: 36.h,
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            decoration: BoxDecoration(
              color: pageBgColor,
              borderRadius: BorderRadius.circular(18.w)
            ),
            child: Row(
              children: [
                Image.asset(
                  'assets/icons/icon_search.png',
                  width: 18.w,
                  height: 18.w,
                ),
                Expanded(child: Container(
                  height: 36.h,
                  padding: EdgeInsets.symmetric(horizontal: 6.w),
                  alignment: Alignment.centerLeft,
                  child: TextField(
                    textAlignVertical: TextAlignVertical.bottom,
                    controller: textEditingController,
                    decoration: InputDecoration(
                      isDense: true,
                      border: UnderlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
                      enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
                      focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
                      counterText: '',
                      hintText: '搜索商品',
                      hintStyle: TextStyle(
                        fontSize: 14.sp,
                        color: tipsColor,
                      )
                    ),
                    cursorColor: textBlackColor,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: textBlackColor
                    ),
                    onChanged: (String value) {
                      controller.keyword = value;
                    },
                    onSubmitted: (String value) {
                      controller.search(value);
                    },
                  ),
                )),
                InkWellUtil.shakeProofInkWell(Image.asset(
                  'assets/icons/icon_clean.png',
                  width: 16.w,
                  height: 16.w,
                ), () {
                  textEditingController.clear();
                  controller.keyword = '';
                })
              ],
            ),
          )),
          SizedBox(width: 16.w),
          ButtonUtil(
            text: '搜索', 
            textColor: mainTextColor,
            bgColors: [
              Colors.transparent,
              Colors.transparent
            ],
            fontSize: 16.sp, 
            borderRadius: 68.h, 
            height: 68.h, 
            onTop: () {
              controller.search(controller.keyword);
            }
          )
        ],
      ),
    );
  }
}